<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>列表页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js"></script>
	<script type="text/javascript" src="/static/admin/js/ys_modal_list_search_form.js"></script>
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />
	
	<!-- iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />
	
	<style>
	html {height: 100vh;background-color: #ffffff;}
	body {height: 100vh;}
	</style>
	
</head>
<body>
	
	<div class="ysui-row" style="height: 100%;">
		
		<!-- 顶部面板【start】 -->
		<div style="background-color: #ffffff; width: 100%; height: 20vh;">
			<div id="id_panel_for_search" style="background-color: #ffffff;">
			</div>
			<script th:inline="javascript">
			// 搜索表单初始化
			var ysModalListSearchForm = null;
			//使用layui的模块
			layui.use(['form', 'jquery', 'ys_modal_list_search_form'], function(){
				var $ = layui.jquery,form = layui.form,ys_modal_list_search_form = layui.ys_modal_list_search_form;
				ysModalListSearchForm = ys_modal_list_search_form.init({
					id:'id_panel_for_search', // 搜索框容器ID
					id_grid_panel:'id_panel_bottom_grid', // 表格容器ID
					id_table_main:'main_table', // 主表格ID
					conditions: $.parseJSON(JSON.stringify([[${dto.conditions}]]))
				});
			});
			</script>
		</div>
		<!-- 顶部面板【end】 -->
		
		<!-- 底部面板【start】 -->
		<div id="id_panel_bottom_grid" class="ysui-col" style="width: 100%;">
					
			<table class="layui-hide" id="main_table" lay-filter="main_table"></table>
			<script type="text/html" id="templet_index_no">
				{{d.LAY_TABLE_INDEX+1}}
			</script>
		</div>
		<!-- 底部面板【end】 -->
	</div>
	<script th:inline="javascript">
	var table_id = 'main_table';
	layui
		.use(['form', 'element', 'table', 'util', 'laydate'], function(){
		var element = layui.element;
		var table = layui.table;
		var form = layui.form;
		var util = layui.util;
		var $ = layui.jquery;
		var laydate = layui.laydate;
		
		// 创建渲染实例
		table.render({
			elem: '#' + table_id
			,url:'[(${dto.pathGridRequest})]' // 此处为静态模拟数据，实际使用时需换成真实接口
			,defaultToolbar: [{
					title: '刷新页面'
					,layEvent: 'LAYTABLE_REFRESH'
					,icon: 'layui-icon-refresh'
				}]
			,height: window.innerHeight - 140 // 最大高度减去其他容器已占有的高度差
			,limit : 20
			,limits : [20,50,500,9999]
			,where: ysModalListSearchForm.getConds()
			,cellMinWidth: 95
			,totalRow: false // 开启合计行
			,page: true
			,request: {
				pageName: 'page',
				limitName: 'size'
			}
			,skin: 'line'
			,even: false // 开启隔行背景
			,cols: [ 
				[(${dto.colGrids})]
			 ]
			,done: function(){
			}
			,error: function(res, msg){
				console.log(res, msg)
			}
		});

		var indexSearchForm = 0;
		// 工具栏事件
		table.on('toolbar(main_table)', function(obj){
			var id = obj.config.id;
			var checkStatus = table.checkStatus(id);
			var othis = lay(this);
			switch(obj.event){
				case 'LAYTABLE_REFRESH':
				{
					layer.confirm("确定刷新吗？",{
						btn: ['确定', '取消']
					}, function (index) {
						location.reload();
						layer.close(index);
					});
					break;
				}
			};
		});
		 
		//触发单元格工具事件
		table.on('tool(main_table)', function(obj){ // 双击 toolDouble
			var data = obj.data;
			//console.log(obj)
		});
		
		//触发表格复选框选择
		table.on('checkbox(main_table)', function(obj){
			console.log(obj)
		});
		 
		//触发表格单选框选择
		table.on('radio(main_table)', function(obj){
			console.log(obj)
		});
		
		// 行单击事件
		table.on('row(main_table)', function(obj){
		});
	});
	
	// 
	$('body').on("mouseenter",".layui-table-body tr",function () {
	    $(this).siblings().find("div").css("color","#142A48");
	    $(this).find("div").css("color","#4DA1FF");
	})
	
	var multySelected = [(${dto.multySelected})]
	var callbackdata = function () {//回调函数，用于父页面调用，调用方式：xx.callbackdata()
		var datas = layui.table.checkStatus('main_table').data;
		if(multySelected == 0) {
			if(datas.length == 1){
				return datas[0];
			} else return "none";
		} else {
			if(datas.length >= 1){
				return datas;
			} else return "none";
		}
	}
	</script>
</body>
		
</html>